<template>
	<view class="container flex-row-center">
		<image src="../../static/back-img.png" class="back-img" @click="backAction"></image>
		<view class="title">{{title}}</view>
		<view style="flex: 1;"></view>
		<view class="apprightbtn" @click="rightAction" v-if="rightTxt">{{rightTxt}}</view>
		<image class="apprightimg" @click="rightAction" v-if="rightImg" :src="rightImg"></image>
	</view>
</template>

<script>
	import dsBridge from 'dsbridge'
	export default {
		name:"custom-navigation",
		props:{
			title:{
				type:String,
				default:''
			},
			rightTxt:{
				type:String,
				default:null
			},
			rightImg:{
				type:String,
				default:null
			}
		},
		data() {
			return {
				
			};
		},
		methods:{ 
			backAction(){
				uni.navigateBack()
			 if(getCurrentPages().length==1)
				dsBridge.call("back")
			},
			rightAction(){
				this.$emit("rightAction")
			}
		}
	}
</script>

<style scoped lang="scss">
.container{
		padding-top: var(--status-bar-height);
		width: 100%;
		height: 88rpx;
		position: relative;
		background: #38C09E;
 	}
	.back-img{
		padding-left: 22rpx;
		padding-right: 14rpx;
		width: 30rpx;
		height: 36rpx;
		z-index: 1;
	}
	.title{
		color: rgba(255, 255, 255, 1);
		font-size: 36rpx;
		flex: 1;
		position: absolute;
		width: 100%;
		text-align: center;
	}
	.apprightbtn {
		color: rgba(255, 255, 255, 1);
		font-size: 32rpx;
		padding: 0 50rpx;
		z-index: 1;
	}
	.apprightimg{
		padding: 0 18rpx;
		width: 40rpx;
		height: 40rpx;
		z-index: 1;
	}
</style>